<template>
	 <view class="staff-card">
	   <image class="avatar" :src="staff.avatar" mode="aspectFill"></image>
	   <view class="info">
	     <view class="name">{{ staff.name }}</view>
	     <view class="service-type">{{ staff.serviceType }}</view>
	     <view class="meta">
	       <view class="years">经验{{ staff.years }}年</view>
	       <view class="rating">评分{{ staff.score }}</view>
	     </view>
	     <view class="orders">接单量{{ staff.orders }}</view>
	   </view>
	 </view>
</template>

<script setup>
	const props=defineProps({
		staff:Object
	})
	
</script>

<style lang="scss">
	.staff-card{
		display: flex;
		width: 800rpx;
		// height: 400rpx;
		background-color: #fff;
		border-radius: 12rpx;
		overflow: hidden;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		   
           
        
		.avatar{
			width: 100%;
            height: 550rpx;
        
		}
		.info{
			padding: 30px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex: 1;
			.name{
            font-size: 28px;
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 8px;
			}
			.service-type{
			display: inline-block;
            background: #e8eeff;
            color: #4a6cf7;
            font-size: 16px;
            font-weight: 600;
            padding: 6px 16px;
            border-radius: 20px;
            margin-bottom: 20px;
			}
			.meta{
			display: flex;
            gap: 20px;
            margin-bottom: 25px;
			.years{
				font-size: 28rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 10rpx;
			}
			.rating{
				font-size: 35rpx;
				font-weight: bold;
				color: #aa2f10;
				margin-left: 6rpx;
			}
			
			}
			.orders{
				font-size: 24rpx;
				color: #999;
				margin-left: 10rpx;
			}
		}
	}

</style>